<template>
    <div>
      <div class="back" @click="$router.go(-1)">
        <van-icon name="arrow-left" />
      </div>
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" indicator-color="skyblue">
        <van-swipe-item v-for="item in gallery" :key="item.id">
          <img
            :src="item.img_url"
            :alt="item.img_desc"
            style="width: 100%; display: block"
          />
        </van-swipe-item>
      </van-swipe>
      <!-- 提示 -->
      <tips />
      <!-- 商品info -->
      <div class="info">
        <h3>{{ info.name }}</h3>
        <p>{{ info.goods_brief }}</p>
        <div class="price">{{ info.retail_price | priceFormat }}</div>
      </div>
      <van-cell
        class="showPop"
        title="展示弹出层"
        is-link
        @click="show = !show"
      />
      <!-- 商品参数 -->
      <div class="attribute">
        <h4>商品参数</h4>
        <ul>
          <li v-for="(item, index) in attribute" :key="index">
            <span>{{ item.name }}</span>
            <div class="van-ellipsis">{{ item.value }}</div>
          </li>
        </ul>
      </div>
      <!-- 商品图片信息展示 v-html="info.goods_desc"-->
      <div ref="goodDesc" class="good_desc"></div>
      <!-- 常见问题 -->
      <div class="box">
        <div class="title">
          <span>常见问题</span>
        </div>
        <div class="issue">
          <ul>
            <li v-for="item in issue" :key="item.id">
              <h3>{{ item.question }}</h3>
              <p>{{ item.answer }}</p>
            </li>
          </ul>
        </div>
        <!-- 相关产品列表 -->
        <productor :goodsList="goodsList" />
      </div>
      <!-- sku -->
      <van-sku
        v-model="show"
        :sku="sku"
        :goods="goods"
        :hide-stock="sku.hide_stock"
        ref="sku"
      />
      <myGoodsActions @showSku="showSku" :badge="badge" />
    </div>
</template>
<script>
import { getDetal, getAboutProds, getCartnNum, AddCar } from "@/request/api";
import tips from "@/components/tips/tips.vue";
import productor from "@/components/Productor/productor.vue";
import myGoodsActions from "@/components/myGoodsActions/myGoodsActions.vue";
import { priceFormat } from "@/Filter/filter.js";
export default {
  data() {
    return {
      sku: {
        tree: [],
        hide_stock: false,
        price: 0,
        stock_num: 0, //商品库存
      }, //sku
      goods: {
        picture: "https://img01.yzcdn.cn/1.jpg",
      }, //
      show: false, //控制sku遮罩层
      gallery: [], //轮播图
      info: {}, //商品信息
      attribute: [], //商品参数
      issue: [], //常见问题
      goodsList: [], //相关商品
      badge: 0, //购物车商品总数
      productList: [], //productList
    };
  },
  components: {
    tips,
    productor,
    myGoodsActions,
  },
  methods: {
    //控制sku的显示
    showSku() {
      //购物车是现实状态下
      if (this.show) {
        let token = window.sessionStorage.getItem("token");
        let sku = this.$refs.sku;
        //通过sku.getSkuData获取sku组件中的所有的数据的方法
        let num = sku.getSkuData().selectedNum;
        if (token) {
          AddCar({
            goodsId: this.$route.query.id,
            productId: this.productList[0].id,
            number: num,
          }).then((res) => {
            if (res.errno === 0) {
              //添加购物车数量
              this.badge = res.data.cartTotal.goodsCount;
              this.show = false;
              this.$toast.success("添加成功");
              window.setTimeout(() => {
                this.$router.push("/cart");
              }, 1000);
            }
          });
        } else {
          this.$toast("请先登录");
          this.$router.push("/user");
        }
      } else {
        //初次打开购物车
        this.show = true;
      }
    },
  },
  created() {
    //通过穿过来的id获取到商品的明细
    getDetal({ id: this.$route.query.id })
      .then((res) => {
        if (res.errno == 0) {
          console.log(res.data);
          let { attribute, info, gallery, issue, productList } = res.data;
          this.gallery = gallery; //轮播图
          this.info = info;
          this.attribute = attribute; //商品规格
          this.issue = issue; //商品参数
          this.$refs.goodDesc.innerHTML = info.goods_desc;
          this.goods.picture = info.list_pic_url; //sku的商品图
          this.sku.price = info.retail_price.toFixed(2); //商品价格
          this.sku.stock_num = info.goods_number; //库存数量
          this.productList = res.data.productList;
        }
      })
      .catch((err) => {
        setTimeout(() => {
          this.$toast("暂时没有数据哦~");
          this.$router.go(-1);
        }, 1000);
      });
    //相关产品
    getAboutProds({
      id: this.$route.query.id,
    }).then((res) => {
      if (res.errno == 0) {
        this.goodsList = res.data.goodsList;
      }
    });
    //购物车商品总数
    getCartnNum().then((res) => {
      if (res.errno == 0) {
        this.badge = res.data.cartTotal.goodsCount;
      }
    });
  },
};
</script>
<style lang="less" scoped>
.info {
  background: #fff;
  text-align: center;
  padding: 0.2rem 0;
  border-bottom: 1px solid #ccc;
  h3 {
    font-size: 0.18rem;
    line-height: 0.3rem;
  }
  p {
    font-size: 0.13rem;
    line-height: 0.3rem;
  }
  .price {
    font-size: 0.13rem;
    color: darkred;
  }
}
.attribute {
  background: #fff;
  padding: 0.16rem 0.16rem;
  margin-top: 0.2rem;
  h4 {
    font-size: 0.14rem;
    font-weight: 400;
    padding: 0.16rem 0;
  }
  li {
    height: 0.4rem;
    line-height: 0.4rem;
    display: flex;
    justify-content: space-between;
    background: #efefef;
    border-radius: 5px;
    margin-bottom: 0.1rem;
    span {
      width: 26%;
      text-align: right;
    }
    div {
      flex: 1;
      margin-left: 0.2rem;
    }
  }
}
.back {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
  font-size: 0.18rem;
  padding: 0.1rem;
  text-align: center;
  color: #333;
}
.good_desc {
  // 深度修改样式
  /deep/img {
    width: 100%;
    display: block;
  }
}
.box {
  padding-bottom: 0.4rem;
}
.box .title {
  position: relative;
  height: 0.5rem;
  background: #fff;
  &::before {
    content: "";
    display: block;
    height: 2px;
    background: #ccc;
    width: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -25%;
    margin-top: -1px;
  }
  span {
    position: relative;
    margin: 0 auto;
    width: 30%;
    background: #fff;
    height: 0.5rem;
    text-align: center;
    display: block;
    line-height: 0.5rem;
  }
}
.box .issue {
  padding: 4%;
  background: #fff;
  h3 {
    position: relative;
    height: 0.2rem;
    line-height: 0.2rem;
    padding-left: 0.1rem;
    background: #fff;
    &::before {
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -2px;
      content: "";
      display: inline-block;
      height: 4px;
      line-height: 4px;
      width: 4px;
      background: darkred;
    }
  }
  p {
    line-height: 0.2rem;
    font-size: 0.12rem;
    padding-left: 2%;
  }
}
.van-sku-container {
  min-height: 0;
}
</style>
